import { react, useState,useRef} from "react";
import  {connect} from 'react-redux'

// 单向数据流
 function Demo1(props) { 
    const dom = useRef()
    function addData(){
        props.addGoods({name: 'zhangsan',age: 18})
    }

    return (
        <div>
            <h1>Demo1</h1>
            <div  ref={dom}></div> 
            <button onClick={addData}>添加</button>
            <ul> 
                {
                    props.list.map((item,index) => {
                        return <li key={index}>{item.name}</li>
                    })
                }
            </ul>
        </div>
    )
}

const mapStateToProps = (state)  => {
    return  {...state} 
}

const actionObj = {
    addGoods(data){
        return {
            type:'list/add',
            data: data
        }
    }
}

export default  connect(mapStateToProps,actionObj)(Demo1)  